<template>
  <div class="block">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="提交人:">
    <el-input v-model="formInline.user" placeholder="提交人"></el-input>
    </el-form-item>
         <el-form-item label="类别:">
        <el-select  v-model="formInline.region"  placeholder="审核状态">
          <el-option label="全部" value="-1"></el-option>
          <el-option label="出差审核" value="0"></el-option>
          <el-option label="其他审核" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态:">
        <el-select  v-model="formInline.region"  placeholder="审核状态">
          <el-option label="全部" value="-1"></el-option>
          <el-option label="已审核" value="0"></el-option>
          <el-option label="未审核" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-timeline>
      <el-timeline-item
        :timestamp="thing.date"
        placement="top"
        v-for="thing in data"
        :key="thing.id+'time'"
        style="margin: 0 20%;"
      >
        <el-card>
          <div>
            <template v-if="thing.stateId!=0">
                <el-tag type="primary">
                  已审核
                <span v-if="thing.stateId==1">(通过)</span>
                <span v-if="thing.stateId==2">(驳回)</span>
                </el-tag>
                 
            </template>
                  <template v-if="thing.stateId==0">
                <el-tag type="danger">
                  未审核
                  </el-tag>
            </template>
            <p>{{ thing.person }} 提交 {{ thing.typeName }}</p>
              <el-link type="primary"  @click="linkClick(thing)"  style="float:right">点击查看</el-link>
          </div>
        </el-card>
      </el-timeline-item>
    </el-timeline>
    <el-dialog
    :title="dialog.thing.typeName"
    :visible.sync="dialog.visible"
    width="80%"
    style="padding:0">
  <component v-bind:is="currentComponent" :id="currentComponentId" v-if="dialog.visible"></component>
      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogclose()" >取 消</el-button>
      <el-button type="danger" @click="dialogclose(false) "  v-if="dialog.thing.stateId==0">驳 回</el-button>
       <el-button type="success" @click="dialogclose(true)"  v-if="dialog.thing.stateId==0">通 过</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

import TravelAudit from "./input/TravelAudit.vue"

export default {
  name: "Thread",
  data() {
    return {
      day:"",
      currentComponent:undefined,
      currentComponentId:"",
      dialog:{
          thing:{},
          visible: false,//弹窗可见
      },
      formInline: {
          user: '',
          region: ''
        },
      data: [],
    };
  },
  methods: {
     onSubmit() {
        console.log('submit!');
      },
      linkClick(thing){
          switch(thing.type){
            case "traveledAudit":{
              this.currentComponent=TravelAudit
              break;
            }
          }
          this.dialog.thing=thing
          this.currentComponentId=thing.id
          this.dialog.visible = true
          return false
      },

    dialogclose(type){
      if(type===undefined){
          let data= this.dialog.thing
          this.dialog.thing={}
          this.dialog.visible=false
           this.currentComponent=undefined
      }else if(type){
        this.$tool.confirm('确认通过？',(res)=>{
          if(res!=="cancel"){
                let data= this.dialog.thing
                this.dialog.thing={}
                data.stateId=1
                this.$tool.axios("audit/updateAudit",
                {
                  day:this.day,
                  ...data
                },
                (response )=>{} //请求成功返回的数据
                )
               
                this.dialog.visible=false
                this.$router.go(0);
                 this.currentComponent=undefined
          }   
            })
      }else{
           this.$tool.confirm('确认驳回？',(res)=>{
               if(res!=="cancel"){
              let data= this.dialog.thing
              this.dialog.thing={}
                data.stateId=2
                  this.$tool.axios("audit/updateAudit",
                {
                  day:this.day,
                  ...data
                },
                (response )=>{} //请求成功返回的数据
                )
                //重置弹窗
                
                this.dialog.visible=false
                this.$router.go(0);
                 this.currentComponent=undefined
          }   
          })
      }
     
    },

  },
  created(){
    this.day=this.$route.params.day
      this.$tool.axios("index/listOneDayToDo",
                      {date: this.$route.params.day},
                      (response )=>{this.data = response.data[this.$route.params.day]} //请求成功返回的数据
                      )
  }
};
</script>
<style>
.el-dialog__body {
  padding:0;
}
.el-dialog {
     margin-top: 5vh !important; 
}
</style>
